{% extends 'base.html' %}

{% block sub_title %}
    Создание секретной записки
{% endblock %}

{% block content %}

    <form action="{% url 'private_notes' %}" method="post">
        {% csrf_token %}

        <div class="form-group">
            <label for="exampleFormControlTextarea1">Можете написать записку здесь</label>
            <textarea class="form-control" name="user_note" rows="10"></textarea>


            <div class="row mt-3">
                <div class="col">
                    <input type="password" autocomplete="new-password" id="password" class="form-control" name='second_password' aria-describedby="passwordHelpBlock"
                           placeholder="Пароль (Необязательно)">
                </div>
                <div class="col">
                    <input type="password" autocomplete="new-password" id="confirm_password" class="form-control"
                           aria-describedby="passwordHelpBlock" placeholder="Подтверждение пароля">
                </div>
            </div>
        </div>

        <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary mt-3">Создать секретную записку</button>

    </form>

    <script>
        var password = document.getElementById("password")
            , confirm_password = document.getElementById("confirm_password");

        function validatePassword() {
            if (password.value != confirm_password.value) {
                confirm_password.setCustomValidity("Пароли не совпадают");
            } else {
                confirm_password.setCustomValidity('');
            }
        }

        password.onchange = validatePassword;
        confirm_password.onkeyup = validatePassword;
    </script>
{% endblock %}